<template>
	<van-popup :safe-area-inset-bottom="true" :overlay="overlay" :round="true" v-model="show" :close-on-click-overlay="false">
		<div class="goto-tb">
			<div class="content">
				<div class="content-head">
					<div class="head-left-img">
						<svg-icon class="icon" iconName="go-taobao-after"></svg-icon>
						<!-- <img src="../assets/images/common/taobao-after.png" alt="" /> -->
					</div>
					<div class="text">
						<div class="d1">
							即将前往淘宝
						</div>
						<div class="d2-loading">
							<div class="spinner">
								<div class="bounce1"></div>
								<div class="bounce2"></div>
								<div class="bounce3"></div>
								<div class="bounce4"></div>
								<div class="bounce5"></div>
							</div>
						</div>
					</div>
					<div class="head-right-img">
						<div class="spinner-r"></div>
						<div class="spinner-rs"></div>
						<svg-icon class="icon" iconName="go-taobao"></svg-icon>
						<!-- <img src="../assets/images/common/taobao.png" alt="" /> -->
					</div>
				</div>
				<div class="content-footer">
					<div>
						先去淘宝领券下单
					</div>
					<div>
						买完回来领取现金补贴
					</div>
				</div>
			</div>
		</div>
	</van-popup>
</template>
<script>
import { Popup } from 'vant';
export default {
	name: 'ssads',
	data() {
		return {
			show: false
		};
	},
	components: {
		'van-popup': Popup
	},
	props: {
		overlay: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		open() {
			this.show = true;
			let params = {
				title: title,
				itemId: gid
			};
			this.$service.shopping.taobao.privilege(params).then(res => {
				if (res.coupon_click_url) {
					window.location.href = res.coupon_click_url;
				} else {
					window.location.href = res.item_url;
				}
				this.show = false;
			});
		},
		hide() {
			this.show = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.goto-tb {
	.content {
		padding-top: 52px;
		width: 476px;
		height: 371.13px;
		overflow: hidden;
		background: url('../assets/images/common/totbBg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		/* prettier-ignore */
		font-size: 14PX;
		.content-head {
			@include flexBox(center, center);
			font-size: 84px;
			.head-left-img {
				position: relative;
				width: 84px;
				margin-right: -30px;
			}
			.head-right-img {
				position: relative;
				width: 84px;
				height: 100px;
				left: -20px;
				top: -12px;
				margin-left: -30px;
				.icon {
					position: absolute;
					top: 23px;
					left: 23px;
				}
			}
			.text {
				color: #ffffff;
				font-size: 16px;
				width: 220px;
				text-align: center;
				.d1 {
					margin-top: -48px;
					-webkit-transform: scale(1);
				}
				.d2-loading {
					margin-top: -15px;
				}
			}
		}
		.content-footer {
			margin-top: 90px;
			text-align: center;
			div:nth-child(1) {
				color: #262424;
				font-size: 20px;
			}
			div:nth-child(2) {
				color: #f70114;
				font-size: 28px;
				font-weight: 400;
				margin-top: 8px;
			}
		}
	}
}

// css loading代码
.spinner {
	margin: 30px auto -30px;
	width: 150px;
	text-align: center;
}

.spinner > div {
	width: 10px;
	height: 10px;
	margin: 0 5px;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
	animation: bouncedelay 1.4s infinite ease-in-out;
	/* Prevent first frame from flickering when animation starts */
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
	}
	40% {
		-webkit-transform: scale(1);
	}
}

@keyframes bouncedelay {
	0%,
	80%,
	100% {
		transform: scale(0);
		-webkit-transform: scale(0);
		background-color: rgba(255, 255, 255, 0.6);
	}
	40% {
		transform: scale(1);
		-webkit-transform: scale(1);
		background-color: rgba(255, 255, 255, 1);
	}
}

// 圆圈放大效果
.spinner-r {
	width: 130px;
	height: 130px;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 100%;
	-webkit-animation: scaleout 1.5s infinite ease-in-out;
	animation: scaleout 1.5s infinite ease-in-out;
}
.spinner-rs {
	width: 180px;
	height: 180px;
	margin: 0 auto;
	background-color: #ffffff;
	position: absolute;
	left: -25px;
	top: -25px;
	border-radius: 100%;
	-webkit-animation: scaleout 1.5s infinite ease-in-out;
	animation: scaleout 1.5s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
	0% {
		-webkit-transform: scale(0);
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 0;
	}
}

@keyframes scaleout {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
		opacity: 0;
	}
}
</style>
